/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 *
 * @format
 * @flow strict-local
 */

import React, { Component } from 'react';

import {
  SafeAreaView, //?安全， 刘海屏
  ScrollView,  //?滚动内容区域
  StatusBar,  //?状态栏 
  StyleSheet, //?样式表
  Text, //todo 文本
  useColorScheme, 
  View, //todo 块，视图
  Button, //todo 按钮
  Alert, //todo 导入弹出组件,
  Image, //todo 图片组件
  TouchableOpacity, //todo 触摸半透明组件
  TextInput, //todo 文本框组件
  FlatList, //todo 扁平列表
} from 'react-native';

import {
  Colors,
  DebugInstructions,
  Header,
  LearnMoreLinks,
  ReloadInstructions,
} from 'react-native/Libraries/NewAppScreen';



class App extends Component {

  constructor(props){
    super(props);
    this.state = { msg: '你好 React Native', list: [], movies: [], refreshing: false, page: 1 };
    //* msg 信息  movies 电影列表  refreshing 刷新状态  page 当前页数
  } 

  componentDidMount() {
    this.getMovies();
    this.getFlowers();
  }
  
  getMovies = (type=1) => {
    this.setState({refreshing: true})
    fetch("http://www.endata.com.cn/API/GetData.ashx",{
      method: 'POST',
      body: `areaId=50&typeId=0&year=0&initial=&pageIndex=${this.state.page}&pageSize=12&MethodName=BoxOffice_GetMovieData_List`,
      headers: {
        "Content-Type": "application/x-www-form-urlencoded;charset=UTF-8"
      }
    })
      .then(res => res.json())
      .then(
        res => {
          console.log(res);
          let list = this.state.movies; //?获取到以前的列表

          if (type == 2){
            list = list.concat(res.Data.Table); //? 触底，把新加载的数据放在后面
          } else {
            list = res.Data.Table.concat(list); //?把列表和当前ajax数据合并 
          }
          this.setState({movies: list}); //?更新列表
          this.setState({page: this.state.page+1, refreshing: false}) 
        }
      )
  }

  getFlowers = () => {
    fetch("https://www.fastmock.site/mock/3c02a69b3952632e311022710cb48a6c/plant/getPlants")
    .then(res => res.json())
    .then(
      res => {
        this.setState({list: res.result.plantList})
      }
    )
  }

  render(){
    return (
      <SafeAreaView>
        <StatusBar barStyle='dark-content'/>
        <FlatList
              refreshing={this.state.refreshing} 
              onRefresh={() => this.getMovies()} //todo 下拉刷新
              onEndReached = {() => this.getMovies(2)} //todo 触底刷新
              data={this.state.movies}
              keyExtractor={item => item.ID}
              numColumns={3}
              columnWrapperStyle={styles.row}
              renderItem={({item}) => {
                return (
                  <View style={{marginTop: 30}}> 
                    <Image source={{uri: item.defaultImage}} style={{ width: 130, height:160}}></Image>
                    <Text style={{...styles.center, color: 'pink', marginTop: 2}}>{item.MovieName}</Text>
                  </View>
                )
              }}
        />
        <ScrollView>
            <View>
              <Text>你好 React Native</Text>
            </View>
            <View style={styles.center}>
              <Button
                onPress={()=>alert("hello, 华东师大计算机王健宇硕士")} 
                title="Btn One" 
                color="#f30"
              ></Button>
            </View>
            <View style={styles.text_center}>
              <Button title="这是一首简单的小情歌" 
              onPress={
                () => Alert.alert("jiubei", "ctt, 2000.01.27", [
                  {text: "back", onPress: ()=>alert('baibaila')},
                  {text: "再也不见", onPress: ()=>Alert.alert("那就这样叭", "愿你...")},
                  {text: "再见不如怀念", onPress: ()=>Alert.alert("是啊，也许也没有怀念")}
                ])
              }
              ></Button>
              <Image 
                style={ {width: 100, height: 100} } 
                source={require('./assets/images/jiubei.jpg')}
              ></Image>
            </View>
            <TouchableOpacity onPress={()=> Alert.alert("图片或文本点击要在外面加一层组件TouchableOpacity哦", "学废了不?")}>
                <Image
                  style={ {width: 200, height: 200} }
                  source={{uri: 'https://s02.mifile.cn/assets/static/image/logo-mi2.png'}}  
                ></Image>
                <View>
                  <Text>{ this.state.msg }</Text>
                  <TextInput
                    value={this.state.msg}
                    onChangeText={ text => this.setState({msg: text}) }
                    style={{height: 40, borderColor: 'gray', borderWidth: 1}}>
                  </TextInput>
                </View>
              </TouchableOpacity>
              <View style={styles.row}>
                <Image
                  style={styles.col}
                  source={require('./assets/images/wallhaven-g75r7d.jpg')}
                ></Image>
                <Image
                  style={styles.col}
                  source={require('./assets/images/wallhaven-j3d6rm.png')}
                ></Image>
                <Image
                  style={styles.col}
                  source={require('./assets/images/wallhaven-pkg1k3.jpg')}
                ></Image>
              </View>
              <View>
                <Text style={[styles.big, styles.orange]}>这是一个文本, 有两个css</Text>
                <Text style={{fontSize: 20, color: 'pink', fontStyle: 'italic'}}>这是斜体文本</Text>
                <Text style={{...styles.big, ...styles.orange, textAlign: 'center'}}>解构css</Text>
              </View>
              <View>
                <Text>{this.state.res}</Text>
              </View>
              <View>
                {
                  this.state.list.map(item => {
                    return <View key={item.plantID}>
                      <View><Text style={{...styles.center, color: 'pink'}}>{item.name}</Text></View>
                      <View style={styles.center}><Image source={{uri: item.coverURL}} style={{ width: 100, height:80}}></Image></View>
                    </View>
                  })
                }
              </View>
          </ScrollView>
      </SafeAreaView>
    );
  }
  
};

//! react native css
//? 没有百分比数值, 不用单位,默认是pt, 默认flex弹性布局, 布局方向默认垂直布局 

const styles = StyleSheet.create({
  center: {justifyContent: "center", alignItems: "center"},
  text_center: {justifyContent: "center", alignItems: "center"},

  row: {flexDirection: "row", justifyContent: 'space-around'},
  col: {flex: 1, height: 168},
  big: {fontSize: 36},
  orange: {color: 'orange'}
});

export default App;
